<template>
  <div class="heart-box" :style="`width:${size}px;height:${size}px`">
    <div class="heart"></div>
  </div>
</template>

<script>
export default {
  name: "heart",
  props: {
    size: {
      type: String || Number,
      default: "50",
    },
  },
};
</script>

<style lang="less" scoped>
.heart-box {
  position: relative;
}
.heart::before,
.heart::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  border-radius: 50%;
}
.heart::after {
  left: 0;
  top: -50%;
}
.heart::before {
  bottom: 0;
  left: -50%;
}
.heart {
  position: absolute;
  width: 58.3%;
  height: 58.3%;
  left: 50%;
  bottom: 12.1%;
  background: currentColor;
  transform: translateX(-50%) rotate(45deg);
}
</style>
